<template>
  <div id="ind">
    <!-- 顶部导航栏 -->
    <div class="top-nav">
      <t-navbar
        title="订单详情"
        :fixed="false"
        left-arrow
        @left-click="handleClick"
      />
      <div class="toggle-tabs">
        <div
          class="tab"
          :class="{ active: activeTab === 'zx' }"
          @click="changeTab('zx')"
        >
          自选单
        </div>
        <div
          class="tab"
          :class="{ active: activeTab === 'jd' }"
          @click="changeTab('jd')"
        >
          经典单
        </div>
      </div>
    </div>
    <!-- 内容 -->
    <div class="tab-content">
      <div class="zxd" v-if="activeTab === 'zx'">
        <!-- 地址 -->
        <div class="zxd-header">
          <t-cell title="收货地址" :note="note" @click="showCascader" arrow />
          <t-cascader
            v-model="selectedAddress"
            :options="options"
            title="请选择地址"
            @change="onChange"
            @pick="onPick"
            :visible="visible"
            @close="visible = false"
          />
        </div>
        <!-- 商品 -->
        <div v-if="orderItems.length === 0" class="no-goods">
          <p>您还没有选择任何商品。</p>
        </div>
        <div class="zxd-goods">
          <div class="zxd-box" v-if="!orderItems.length == 0">
            <div class="zxd-goods-title">共计{{ orderItems.length }}件商品</div>
            <div class="zxd-goods-list">
              <div
                class="zxd-goods-item"
                v-for="(item, index) in orderItems"
                :key="index"
              >
                <div class="zxd-goods-img">
                  <img :src="item.img" alt="" />
                </div>
                <div class="zxd-goods-info">
                  <div>{{ item.name }}</div>
                  <div>零售</div>
                </div>
                <div class="zxd-goods-num">x{{ item.quantity }}</div>
                <div class="zxd-goods-price">
                  ￥{{ (item.price * item.quantity).toFixed(2) }}
                </div>
              </div>
            </div>
            <div class="zxd-goods-total">
              <div>基准价</div>
              <div>￥{{ totalBasePrice.toFixed(2) }}</div>
            </div>
            <div class="zxd-goods-price">
              <div>建议价</div>
              <div>￥{{ totalBasePrice.toFixed(2) }}</div>
            </div>
            <div class="zxd-text">
              <t-textarea
                class="textarea-example"
                name="标签文字"
                label="备注"
                placeholder="请输入文字"
              />
            </div>
          </div>
        </div>
        <div class="flower-display">
          <div class="image-gallery">
            <div class="imgg">
              <img
                v-for="(image, index) in images"
                :key="index"
                :src="image"
                alt="flower"
                class="flower-image"
              />
            </div>
            <div class="tui">推荐方案</div>
          </div>
          <div class="footer">
            <div class="total">
              合计: <span class="price">¥{{ totalBasePrice.toFixed(2) }}</span>
            </div>
            <button
              class="checkout-button"
              @click="checkout(this.$router.push('/order'))"
            >
              结算
            </button>
          </div>
        </div>
      </div>
      <div class="jdd" v-if="activeTab === 'jd'">经典单</div>
    </div>
  </div>
</template>

<script setup>
import "./order.css";
import { ref, computed } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
const images = ref([]);
const orderItems = ref([]); // 存储订单商品信息
if (route.query.images) {
  images.value = JSON.parse(route.query.images); // 解析 JSON 字符串为数组
}
if (route.query.items) {
  orderItems.value = JSON.parse(route.query.items); // 解析商品信息
}
const totalBasePrice = computed(() => {
  return orderItems.value.reduce((total, item) => {
    return total + item.price * item.quantity; // 累加每个商品的总价
  }, 0);
});
const data = {
  areaList: [
    {
      label: "北京市",
      value: "110000",
      children: [
        {
          value: "110100",
          label: "北京市",
          children: [
            { value: "110101", label: "东城区" },
            { value: "110102", label: "西城区" },
            { value: "110105", label: "朝阳区" },
            // ...其他区
          ],
        },
      ],
    },
    {
      label: "天津市",
      value: "120000",
      children: [
        {
          value: "120100",
          label: "天津市",
          children: [
            { value: "120101", label: "和平区" },
            { value: "120102", label: "河东区" },
            // ...其他区
          ],
        },
      ],
    },
    // ...其他省市
  ],
};

const options = data.areaList;
const selectedAddress = ref([]);
const visible = ref(false);
const note = ref("请选择地址");

const onChange = (value, options) => {
  note.value = options?.map((item) => item.label).join("/") || "请选择地址";
};

const showCascader = () => {
  visible.value = true;
};

const onPick = (context) => {
  console.log(
    `level: ${context.level}, value: ${context.value}, index: ${context.index}`
  );
};

const activeTab = ref("zx"); // 默认激活“自选单”选项卡

const changeTab = (tabName) => {
  activeTab.value = tabName; // 更新当前激活的选项卡
};

const handleClick = () => {
  console.log("left-click");
  window.history.back();
};
</script>

<style lang="scss" scoped></style>
